<template>
  <div class="app-container home">
    <!-- 欢迎横幅 -->
    <el-row class="welcome-banner">
      <el-col :span="24">
                <div class="banner-content">
          <div class="welcome-text">
            <h1 class="welcome-title">欢迎使用退休人员后台管理系统</h1>
<!--            <p class="welcome-subtitle">RuoYi Management System</p>-->
            <p class="welcome-desc">基于SpringBoot + Vue的现代化企业级管理系统</p>
            <div class="welcome-features">
              <span class="feature-item">
                <i class="el-icon-s-platform"></i>
                企业级框架
              </span>
              <span class="feature-item">
                <i class="el-icon-s-data"></i>
                前后端分离
              </span>
              <span class="feature-item">
                <i class="el-icon-s-opportunity"></i>
                高效办公
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 系统信息卡片 -->
    <el-row :gutter="20" class="info-section">
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-s-platform"></i>
          </div>
          <div class="card-content">
            <h3>系统版本</h3>
            <p>v1.0.0</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-s-data"></i>
          </div>
          <div class="card-content">
            <h3>技术架构</h3>
            <p>前后端分离</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-s-opportunity"></i>
          </div>
          <div class="card-content">
            <h3>开源协议</h3>
            <p>MIT License</p>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-icon">
            <i class="el-icon-s-flag"></i>
          </div>
          <div class="card-content">
            <h3>更新状态</h3>
            <p>持续维护</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 技术栈展示 -->
    <el-row :gutter="20" class="tech-section">
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="tech-card" shadow="hover">
          <div slot="header" class="card-header">
            <span><i class="el-icon-s-operation"></i> 后端技术</span>
          </div>
          <div class="tech-list">
            <el-tag size="medium" type="primary">SpringBoot</el-tag>
            <el-tag size="medium" type="success">Spring Security</el-tag>
            <el-tag size="medium" type="warning">MyBatis</el-tag>
            <el-tag size="medium" type="danger">Redis</el-tag>
            <el-tag size="medium" type="info">MySQL</el-tag>
            <el-tag size="medium" type="primary">JWT</el-tag>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="tech-card" shadow="hover">
          <div slot="header" class="card-header">
            <span><i class="el-icon-s-grid"></i> 前端技术</span>
          </div>
          <div class="tech-list">
            <el-tag size="medium" type="primary">Vue.js</el-tag>
            <el-tag size="medium" type="success">Vuex</el-tag>
            <el-tag size="medium" type="warning">Element UI</el-tag>
            <el-tag size="medium" type="danger">Axios</el-tag>
            <el-tag size="medium" type="info">Sass</el-tag>
            <el-tag size="medium" type="primary">Vue Router</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速入口 -->

    <!-- 底部信息 -->
    <el-row class="footer-section">
      <el-col :span="24">
        <div class="footer-content">
          <p class="footer-text">
            <i class="el-icon-s-promotion"></i>
            退休人员管理系统 - 让开发更简单，让管理更高效
          </p>
          <p class="footer-links">
            <el-link type="primary" href="" target="_blank">官方网站</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" href="" target="_blank">码云地址</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" href="" target="_blank">GitHub</el-link>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.9.0"
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    },
    // 系统管理模块
    goToUser() {
      this.$router.push('/system/user')
    },
    goToRole() {
      this.$router.push('/system/role')
    },
    goToMenu() {
      this.$router.push('/system/menu')
    },
    goToDept() {
      this.$router.push('/system/dept')
    },
    goToDict() {
      this.$router.push('/system/dict')
    },
    goToPost() {
      this.$router.push('/system/post')
    },
    goToConfig() {
      this.$router.push('/system/config')
    },
    goToNotice() {
      this.$router.push('/system/notice')
    },
    // 退休人员管理模块
    goToRetirementMenu() {
      this.$router.push('/retirement/retirementMenu')
    },
    goToRetirementArticle() {
      this.$router.push('/retirement/retirementArticle')
    },
    goToRetirementArticlePublished() {
      this.$router.push('/retirement/retirementArticlePublished')
    },
    goToRetirementArticleReview() {
      this.$router.push('/retirement/retirementArticleReview')
    },
    goToRetirementCarousel() {
      this.$router.push('/retirement/retirementCarousel')
    },
    goToRetirementCollect() {
      this.$router.push('/retirement/retirementCollect')
    },
    goToRetirementEnroll() {
      this.$router.push('/retirement/retirementEnroll')
    },
    // 系统监控模块
    goToServer() {
      this.$router.push('/monitor/server')
    },
    goToCache() {
      this.$router.push('/monitor/cache')
    },
    goToOnline() {
      this.$router.push('/monitor/online')
    },
    goToLoginLog() {
      this.$router.push('/monitor/logininfor')
    },
    goToOperLog() {
      this.$router.push('/monitor/operlog')
    },
    goToJob() {
      this.$router.push('/monitor/job')
    },
    goToDruid() {
      this.$router.push('/monitor/druid')
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding-bottom: 100px; /* 为固定底部留出空间 */

  .welcome-banner {
    margin-bottom: 30px;

    .banner-content {
      background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
      border-radius: 8px;
      padding: 40px;
      color: white;
      text-align: center;

      .welcome-title {
        font-size: 36px;
        font-weight: 300;
        margin: 0 0 10px 0;
        color: white;
      }

      .welcome-subtitle {
        font-size: 18px;
        margin: 0 0 15px 0;
        opacity: 0.9;
        color: white;
      }

             .welcome-desc {
         font-size: 16px;
         margin: 0 0 25px 0;
         opacity: 0.8;
         color: white;
       }

       .welcome-features {
         display: flex;
         justify-content: center;
         gap: 30px;
         flex-wrap: wrap;

         .feature-item {
           display: flex;
           align-items: center;
           color: white;
           font-size: 14px;
           opacity: 0.9;
           padding: 8px 16px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 20px;
           backdrop-filter: blur(10px);
           transition: all 0.3s ease;

           &:hover {
             background: rgba(255, 255, 255, 0.2);
             transform: translateY(-2px);
           }

           i {
             margin-right: 6px;
             font-size: 16px;
           }
         }
       }
    }
  }

  .info-section {
    margin-bottom: 30px;

    .info-card {
      text-align: center;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .card-icon {
        font-size: 48px;
        color: #1890ff;
        margin-bottom: 15px;
      }

      .card-content {
        h3 {
          margin: 0 0 10px 0;
          font-size: 18px;
          color: #303133;
        }

        p {
          margin: 0;
          font-size: 16px;
          color: #606266;
        }
      }
    }
  }

  .tech-section {
    margin-bottom: 30px;

    .tech-card {
      .card-header {
        font-size: 16px;
        font-weight: 600;
        color: #303133;

        i {
          margin-right: 8px;
          color: #1890ff;
        }
      }

      .tech-list {
        .el-tag {
          margin: 5px;
          border-radius: 15px;
        }
      }
    }
  }

  .quick-section {
    margin-bottom: 30px;

    .quick-card {
      .card-header {
        font-size: 16px;
        font-weight: 600;
        color: #303133;

        i {
          margin-right: 8px;
          color: #1890ff;
        }
      }

      .quick-category {
        margin-bottom: 30px;

        &:last-child {
          margin-bottom: 0;
        }

        .category-title {
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin: 0 0 20px 0;
          padding-bottom: 10px;
          border-bottom: 2px solid #f0f2f5;

          i {
            margin-right: 8px;
            color: #1890ff;
            font-size: 18px;
          }
        }

        .quick-links {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 15px;

          .quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            background: #fafbfc;
            border: 1px solid #e8eaec;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;

            &:hover {
              background: #f0f9ff;
              border-color: #1890ff;
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
            }

            .quick-icon {
              width: 48px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
              border-radius: 50%;
              margin-bottom: 12px;
              transition: all 0.3s ease;

              i {
                font-size: 20px;
                color: white;
              }
            }

            .quick-text {
              font-size: 14px;
              color: #303133;
              font-weight: 500;
              line-height: 1.4;
            }

            &:hover .quick-icon {
              transform: scale(1.1);
            }

            &:hover .quick-text {
              color: #1890ff;
            }
          }
        }
      }
    }
  }

    .footer-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    .footer-content {
      text-align: center;
      padding: 15px 0;
      border-top: 1px solid #ebeef5;

      .footer-text {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #909399;

        i {
          margin-right: 5px;
          color: #1890ff;
        }
      }

      .footer-links {
        margin: 0;

        .el-link {
          font-size: 14px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    .welcome-banner {
      .banner-content {
        padding: 30px 20px;

        .welcome-title {
          font-size: 28px;
        }

        .welcome-subtitle {
          font-size: 16px;
        }

                 .welcome-desc {
           font-size: 14px;
         }

         .welcome-features {
           gap: 20px;

           .feature-item {
             font-size: 12px;
             padding: 6px 12px;
           }
         }
      }
    }

    .quick-section {
      .quick-card {
        .quick-category {
          .quick-links {
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 10px;

            .quick-item {
              padding: 15px 10px;

              .quick-icon {
                width: 40px;
                height: 40px;
                margin-bottom: 8px;

                i {
                  font-size: 16px;
                }
              }

              .quick-text {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

